<!DOCTYPE html>
<html
  xmlns:th="http://www.thymeleaf.org"
  xmlns:sec="http://www.thymeleaf.org/extras/spring-security"
>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>AI 面试 系统 - 开始面试吧</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
      <div class="container">
        <a class="navbar-brand" href="#">AI 面试 系统</a>
        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarNav"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav ms-auto">
            <li class="nav-item">
              <span class="nav-link"
                >欢迎, [[${#authentication?.principal?.username ?:
                '游客'}]]</span
              >
            </li>
            <li class="nav-item">
              <a class="nav-link" th:href="@{/interviews}">我的面试</a>
            </li>
            <li class="nav-item" sec:authorize="hasRole('ADMIN')">
              <a class="nav-link" th:href="@{/admin/users}">用户管理</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" th:href="@{/logout}">登出</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <div class="container mt-5">
      <div class="row">
        <div class="col-md-8 offset-md-2">
          <div class="card shadow">
            <div class="card-header bg-primary text-white">
              <h4 class="mb-0">开始您的AI面试</h4>
            </div>
            <div class="card-body">
              <div class="row mb-4">
                <div class="col-md-8">
                  <h5 class="text-primary">🚀 AI智能面试系统</h5>
                  <p class="text-muted">
                    上传您的简历，我们的AI将根据您的经验和目标职位，生成个性化的面试问题。
                    支持PDF和Word文档，或直接粘贴简历文本。
                  </p>
                </div>
                <div class="col-md-4">
                  <div class="card bg-light">
                    <div class="card-body text-center">
                      <h6 class="card-title">面试流程</h6>
                      <small class="text-muted">
                        1. 上传简历<br />
                        2. AI生成问题<br />
                        3. 回答问题<br />
                        4. 获得评估
                      </small>
                    </div>
                  </div>
                </div>
              </div>

              <div th:if="${errorMessage}" class="alert alert-danger mb-4">
                <i class="bi bi-exclamation-triangle"></i> [[${errorMessage}]]
              </div>

              <div th:if="${successMessage}" class="alert alert-success mb-4">
                <i class="bi bi-check-circle"></i> [[${successMessage}]]
              </div>

              <form
                th:action="@{/interview/start}"
                method="post"
                enctype="multipart/form-data"
              >
                <div class="mb-4">
                  <label for="jobPosition" class="form-label"
                    >目标职位 <span class="text-danger">*</span></label
                  >
                  <select
                    class="form-select"
                    id="jobPosition"
                    name="jobPosition"
                    required
                  >
                    <option value="">请选择职位</option>
                    <option value="软件工程师">软件工程师</option>
                    <option value="前端开发工程师">前端开发工程师</option>
                    <option value="后端开发工程师">后端开发工程师</option>
                    <option value="全栈开发工程师">全栈开发工程师</option>
                    <option value="Java开发工程师">Java开发工程师</option>
                    <option value="Python开发工程师">Python开发工程师</option>
                    <option value="产品经理">产品经理</option>
                    <option value="UI/UX设计师">UI/UX设计师</option>
                    <option value="数据分析师">数据分析师</option>
                    <option value="市场营销经理">市场营销经理</option>
                    <option value="销售经理">销售经理</option>
                    <option value="人力资源专员">人力资源专员</option>
                    <option value="财务分析师">财务分析师</option>
                    <option value="项目经理">项目经理</option>
                    <option value="其他">其他</option>
                  </select>
                  <div class="form-text">选择最符合您求职目标的职位</div>
                </div>

                <div class="mb-4">
                  <label class="form-label">简历</label>
                  <p class="text-muted mb-2">
                    上传 PDF 或 DOCX 文件，或粘贴您的简历内容
                  </p>

                  <div class="mb-3">
                    <label for="resumeFile" class="form-label">上传简历文件</label>
                    <div class="border rounded p-4 text-center bg-light" style="cursor: pointer;" onclick="document.getElementById('resumeFile').click()">
                      <i class="bi bi-cloud-upload fs-3 text-muted"></i>
                      <p class="mb-1 mt-2">点击或拖拽文件至此处上传</p>
                      <p class="text-sm text-muted">支持 PDF 或 DOCX 格式，最大 10MB</p>
                      <input
                              class="form-control d-none"
                              type="file"
                              id="resumeFile"
                              name="resumeFile"
                              accept=".pdf,.docx"
                              onchange="document.querySelector('.file-name').textContent = this.files[0]?.name || ''"
                      />
                      <p class="file-name text-primary mt-2"></p>
                    </div>
                  </div>

                  <div class="mb-3">
                    <label for="resumeText" class="form-label"
                      >或粘贴简历文本</label
                    >
                    <textarea
                      class="form-control"
                      id="resumeText"
                      name="resumeText"
                      rows="8"
                      placeholder="将您的简历内容粘贴在这里..."
                    ></textarea>
                  </div>
                </div>

                <div class="d-grid">
                  <button type="submit" class="btn btn-primary">
                    开始面试
                  </button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    <script>
      // Simple script to ensure either file or text is provided
      document.querySelector("form").addEventListener("submit", function (e) {
        const fileInput = document.getElementById("resumeFile");
        const textInput = document.getElementById("resumeText");

        if (fileInput.files.length === 0 && !textInput.value.trim()) {
          e.preventDefault();
          alert("请通过上传文件或粘贴文本来提供您的简历。");
        }
      });
    </script>
  </body>
</html>
